<template>
  <div class="fx_row content">

    <!--组织机构-->
    <div class="left_block shadow3" :style="{minHeight:option.leftBlockMinHeight}">

      <div style="padding: 10px" class="fx_row fx_center_all">

        <div style="font-size: 16px;color: #000000;">组织机构</div>
        <div class="fx_110"></div>

        <!--全部展开-->
        <!--        <a-tooltip v-if="option.openDown" placement="top">-->
        <!--          <template #title>-->
        <!--            <span>全部展开</span>-->
        <!--          </template>-->
        <!--          <down-outlined style="font-size: 15px" @click.stop="openTreeAll"/>-->
        <!--        </a-tooltip>-->

        <!--全部关闭-->
        <!--        <a-tooltip v-if="!option.openDown" placement="top">-->
        <!--          <template #title>-->
        <!--            <span>全部关闭</span>-->
        <!--          </template>-->
        <!--          <up-outlined style="font-size: 15px" @click.stop="closeTreeAll"/>-->
        <!--        </a-tooltip>-->
        <!--        <a-divider type="vertical"></a-divider>-->

        <!--全部关闭-->
        <a-tooltip placement="top">
          <template #title>
            <span>全部关闭</span>
          </template>
          <up-outlined style="font-size: 15px" @click.stop="closeTreeAll"/>
        </a-tooltip>
        <a-divider type="vertical"></a-divider>

        <!--编辑组织结构-->
        <a-tooltip placement="top">
          <template #title>
            <span>编辑组织结构</span>
          </template>
          <form-outlined style="font-size: 15px" @click.stop="()=>{$router.push('/system/org')}"/>
        </a-tooltip>
        <a-divider type="vertical"></a-divider>

        <!--刷新-->
        <a-tooltip placement="top">
          <template #title>
            <span>刷新</span>
          </template>
          <redo-outlined style="font-size: 15px" @click.stop="queryOrgPage"/>
        </a-tooltip>

      </div>

      <a-divider style="margin: 0 0 10px 0"></a-divider>

      <a-tree
          v-model:expandedKeys="option.expandedKeys"
          v-model:selectedKeys="option.selectedKeys"
          style="margin-left: 10px"
          :show-line="true"
          :tree-data="option.orgTree"
          @expand="orgTreeExpand"
          @select="orgTreeSelect"
      >
        <template #switcherIcon="{ switcherCls }">
          <down-outlined :class="switcherCls"/>
        </template>
        <template #title="{ id, name }">
          <span style="font-size: 16px;color: #000000">{{ name }}</span>
        </template>
      </a-tree>

    </div>

    <!--表格-->
    <div class="fx_110" style="width: calc(100% - 260px - 16px);">

      <!--搜索-->
      <div ref="searchDiv">
        <a-form
            ref="defSearch"
            :model="defSearch.param"
            :rules="defSearch.rules"
            :labelCol="defSearch.labelCol"
            class="search_form shadow3">

          <!--搜索条件-->
          <div class="fx_row fx_wrap fx_start" style="width: calc(100%)">
            <a-form-item label="昵称" name="name" style="width: 220px">
              <a-input allow-clear v-model:value="defSearch.param.name" placeholder="请输入昵称"></a-input>
            </a-form-item>

            <a-form-item label="账号" name="account" style="width: 220px">
              <a-input allow-clear v-model:value="defSearch.param.account" placeholder="请输入账号"></a-input>
            </a-form-item>

            <a-form-item label="手机号" name="phone" style="width: 220px">
              <a-input allow-clear v-model:value="defSearch.param.phone" placeholder="请输入手机号"></a-input>
            </a-form-item>

            <a-form-item label="角色" name="roleIds" style="width: 220px">
              <a-select v-model:value="defSearch.param.roleIds" mode="multiple" placeholder="请选择角色" :allowClear="true">
                <a-select-option v-for="(item,index) in option.role" :value=item.id>
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>

            <a-form-item label="职位" name="postIds" style="width: 220px">
              <a-select v-model:value="defSearch.param.postIds" mode="multiple" placeholder="请选择职位" :allowClear="true">
                <a-select-option v-for="(item,index) in option.post" :value=item.id>
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>

          </div>

          <!--按钮-->
          <a-form-item class="search_button_2">
            <a-button type="primary" @click.stop="search" class="font12">
              <template #icon>
                <SearchOutlined/>
              </template>
              查询
            </a-button>
            <a-button style="margin-left: 10px" @click.stop="()=>{ resetForm('defSearch'); }" class="font12">
              <template #icon>
                <UndoOutlined/>
              </template>
              重置
            </a-button>
          </a-form-item>

        </a-form>
      </div>

      <!--表格选项-->
      <div ref="toolDiv" class="table_tools">
        <a-button class="font11" type="primary" size="small" ghost @click.stop="openAdd(null)">
          <template #icon>
            <plus-outlined/>
          </template>
          新建
        </a-button>
        <!--      <a-divider type="vertical"/>-->
        <!--      <a-button class="font11" type="primary" size="small" ghost>删除</a-button>-->

        <div style="flex: 1 1 0"></div>

        <a-tooltip placement="top">
          <template #title>
            <span>批量删除</span>
          </template>
          <delete-outlined :style="{fontSize: '16px'}" @click.stop="delRoleBatch"/>
        </a-tooltip>

        <a-divider type="vertical"/>

        <a-tooltip placement="top">
          <template #title>
            <span>表格大小</span>
          </template>
          <a-dropdown :trigger="['click']">
            <setting-outlined :style="{fontSize: '16px'}"/>
            <template #overlay>
              <a-menu v-model:selectedKeys="defTable.size" @click="(item)=>{defTable.size=item.key+''}">
                <a-menu-item v-for="(item,index) in option.tableSize" :key="item.value">
                  <div style="padding: 0 5px">
                    {{ item.label }}
                  </div>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>

        </a-tooltip>

        <!--        <a-divider type="vertical"/>-->

        <!--        <a-tooltip placement="top">-->
        <!--          <template #title>-->
        <!--            <span>全屏</span>-->
        <!--          </template>-->
        <!--          <fullscreen-outlined :style="{fontSize: '16px'}"/>-->
        <!--        </a-tooltip>-->
        <!--          <a style="margin-left: 10px">-->
        <!--            <file.ts-add-outlined style="color: #1890FF;font-size: 10px;"/>-->
        <!--            新增</a>-->
        <!--          <a style="margin-left: 10px">-->
        <!--            <edit-outlined style="color: #1890FF;font-size: 10px;"/>-->
        <!--            编辑</a>-->
        <!--          <a style="margin-left: 10px;padding:2px;">-->
        <!--            <delete-outlined style="color: #1890FF;font-size: 10px;"/>-->
        <!--            删除</a>-->
      </div>

      <!--表格-->
      <div ref="tableDiv" :style="{background:'#FFFFFF',minHeight:option.tableMinHeight}">
        <a-table
            ref="defTable"
            rowKey="id"
            sticky
            style="height: 100%"
            :pagination="false"
            :size="defTable.size"
            :columns="defTable.column"
            :expandRowByClick="true"
            :data-source="defTable.data"
            :rowSelection="defTable.rowSelection()"
            @resizeColumn="(w, col) => {col.width = w;}">

          <!--表格内容-->
          <template #bodyCell="{ text, record, index, column  }">
            <!--目录-->
            <template v-if="column.dataIndex === 'name'">
              <!--            <a-tag color="cyan">-->
              {{ text }}
              <!--            </a-tag>-->
            </template>

            <template v-if="column.dataIndex === 'role'">
              <template v-for="(item,index) in text">
                <a-tag color="blue">
                  {{ item.name }}
                </a-tag>
              </template>
            </template>

            <template v-if="column.dataIndex === 'post'">
              <template v-for="(item,index) in text">
                <a-tag>
                  {{ item.name }}
                </a-tag>
              </template>
            </template>

            <template v-if="column.dataIndex === 'org'">
              <template v-for="(item,index) in text">
                <a-tag color="green">
                  {{ item.name }}
                </a-tag>
              </template>
            </template>

            <template v-if="column.dataIndex === 'status'">
              <a-tag v-if="text==0" color="green" class="round">启用</a-tag>
              <a-tag v-if="text==1" color="orange" class="round">停用</a-tag>
            </template>

            <!--操作-->
            <template v-if="column.dataIndex === 'action'">

              <a @click.stop="openCopyAdd(record)">复制新增</a>

              <a-divider type="vertical"/>

              <a @click.stop="openEdit(record)">编辑</a>

              <a-divider type="vertical"/>

              <a-popconfirm placement="bottomRight" ok-text="确定" cancel-text="取消"
                            @confirm="deleteRole(record)">
                <template #title>
                  <p>是否执行删除操作?</p>
                </template>
                <a>删除</a>
              </a-popconfirm>

              <a-divider type="vertical"/>

              <a @click.stop="openInfo(record)">详情</a>

            </template>

          </template>

          <!--      &lt;!&ndash;额外展开行&ndash;&gt;-->
          <!--      <template #expandedRowRender="{ record }">-->
          <!--        <p style="margin: 0">-->
          <!--          {{ record.description }}-->
          <!--        </p>-->
          <!--      </template>-->

        </a-table>
      </div>

      <!--分页-->
      <div ref="pageDiv">
        <Pagination class="table_page"
                    :current="defPage.current"
                    :total="defPage.total"
                    :page-size="defPage.size"
                    @change="defPage.change"/>
      </div>

    </div>

    <!--新增Dialog-->
    <a-modal
        title="新增角色"
        style="min-width: 800px"
        :maskClosable="false"
        :destroyOnClose="true"
        v-model:visible="option.openAdd">

      <!--表单-->
      <a-form
          ref="defForm"
          label-align="right"
          :model="defForm.data"
          :rules="defForm.rules"


          :scrollToFirstError="true">
        <a-form-item label="ID" name="id">
          <a-input v-model:value="defForm.data.id" type="number" placeholder="请输入唯一ID" :allowClear="true"/>
        </a-form-item>

        <a-form-item label="角色名称" name="name">
          <a-input v-model:value="defForm.data.name" placeholder="请输入角色名称" :allowClear="true"/>
        </a-form-item>

        <a-form-item label="权限字符" name="role_key">
          <a-input v-model:value="defForm.data.role_key" placeholder="请输入权限字符" :allowClear="true"/>
        </a-form-item>

        <a-form-item label="状态" name="status">
          <a-radio-group v-model:value="defForm.data.status">
            <a-radio value="0">启用</a-radio>
            <a-radio value="1">停用</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item label="排序" name="sort">
          <a-input-number v-model:value="defForm.data.sort" :min="1" :max="99999"/>
        </a-form-item>

        <a-form-item label="描述信息" name="desc">
          <a-textarea show-count :maxlength="200" v-model:value="defForm.data.desc" placeholder="请输入描述信息"
                      :rows="3"/>
        </a-form-item>

        <a-divider style="margin: 0 0 20px 0;padding: 0"></a-divider>
        <h3>菜单权限</h3>
        <!--表格-->
        <a-table
            sticky
            ref="menuTable"
            rowKey="id"
            :pagination="false"
            :size="menuTable.size"
            :columns="menuTable.column"
            :data-source="menuTable.data"
            :rowSelection="menuTable.rowSelection()"
            @resizeColumn="(w, col) => {col.width = w;}">

          <!--表格内容-->
          <template #bodyCell="{ text, record, index, column  }">
            <!--目录-->
            <template v-if="column.dataIndex === 'name'">
              <span v-if="record.type==0||record.type==1"> {{ text }}</span>
              <a-tag v-else> {{ text }}</a-tag>
            </template>

            <template v-if="column.dataIndex === 'apis'">

              <tempalte v-if="text">
                <a-tooltip placement="top">
                  <template #title>
                    <a v-for=" (item,index) in JSON.parse(text)">
                      {{ item }} &nbsp;
                    </a>
                  </template>
                  <a-tag v-for=" (item,index) in JSON.parse(text)">
                    {{ item }}
                  </a-tag>
                </a-tooltip>
              </tempalte>

              <tempalte v-else>
                #
              </tempalte>

            </template>

            <template v-if="column.dataIndex === 'path'">
              <span v-if="text">{{ text }}</span>
              <span v-else>#</span>
            </template>

            <template v-if="column.dataIndex === 'type'">
              <a-tag v-if="text==0" color="blue" class="round">目录</a-tag>
              <a-tag v-else-if="text==1" color="green" class="round">菜单</a-tag>
              <a-tag v-else color="yellow" class="round">功能</a-tag>
            </template>
          </template>

        </a-table>

      </a-form>

      <!--底部按钮-->
      <template #footer>
        <a-button @click.stop="()=>{option.openAdd = false}">取消</a-button>
        <!--        <a-button @click.stop="()=>{resetForm('defForm')}">重置</a-button>-->
        <a-button type="primary" @click.stop="addRole">保存</a-button>
      </template>

    </a-modal>

    <!--编辑Dialog-->
    <a-modal
        title="新增角色"
        style="min-width: 800px"
        :maskClosable="false"
        :destroyOnClose="true"
        v-model:visible="option.openEdit">

      <!--表单-->
      <a-form
          ref="defForm"
          label-align="right"
          :model="defForm.data"
          :rules="defForm.rules"


          :scrollToFirstError="true">
        <a-form-item label="ID" name="id">
          <a-input disabled type="number" v-model:value="defForm.data.id" placeholder="请输入唯一ID" :allowClear="true"/>
        </a-form-item>

        <a-form-item label="角色名称" name="name">
          <a-input v-model:value="defForm.data.name" placeholder="请输入角色名称" :allowClear="true"/>
        </a-form-item>

        <a-form-item label="权限字符" name="role_key">
          <a-input disabled v-model:value="defForm.data.role_key" placeholder="请输入权限字符" :allowClear="true"/>
        </a-form-item>

        <a-form-item label="状态" name="status">
          <a-radio-group v-model:value="defForm.data.status">
            <a-radio value="0">启用</a-radio>
            <a-radio value="1">停用</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item label="排序" name="sort">
          <a-input-number v-model:value="defForm.data.sort" :min="1" :max="99999"/>
        </a-form-item>

        <a-form-item label="描述信息" name="desc">
          <a-textarea show-count :maxlength="200" v-model:value="defForm.data.desc" placeholder="请输入描述信息"
                      :rows="3"/>
        </a-form-item>

        <a-divider style="margin: 0 0 20px 0;padding: 0"></a-divider>
        <h3>菜单权限</h3>
        <!--表格-->
        <a-table
            sticky
            ref="menuTable"
            rowKey="id"
            :pagination="false"
            :size="menuTable.size"
            :columns="menuTable.column"
            :data-source="menuTable.data"
            :rowSelection="menuTable.rowSelection()"
            @resizeColumn="(w, col) => {col.width = w;}">

          <!--表格内容-->
          <template #bodyCell="{ text, record, index, column  }">
            <!--目录-->
            <template v-if="column.dataIndex === 'name'">
              <span v-if="record.type==0||record.type==1"> {{ text }}</span>
              <a-tag v-else> {{ text }}</a-tag>
            </template>

            <template v-if="column.dataIndex === 'apis'">

              <tempalte v-if="text">
                <a-tooltip placement="top">
                  <template #title>
                    <a v-for=" (item,index) in JSON.parse(text)">
                      {{ item }} &nbsp;
                    </a>
                  </template>
                  <a-tag v-for=" (item,index) in JSON.parse(text)">
                    {{ item }}
                  </a-tag>
                </a-tooltip>
              </tempalte>

              <tempalte v-else>
                #
              </tempalte>

            </template>

            <template v-if="column.dataIndex === 'path'">
              <span v-if="text">{{ text }}</span>
              <span v-else>#</span>
            </template>

            <template v-if="column.dataIndex === 'type'">
              <a-tag v-if="text==0" color="blue" class="round">目录</a-tag>
              <a-tag v-else-if="text==1" color="green" class="round">菜单</a-tag>
              <a-tag v-else color="yellow" class="round">功能</a-tag>
            </template>
          </template>

        </a-table>

      </a-form>

      <!--底部按钮-->
      <template #footer>
        <a-button @click.stop="()=>{option.openEdit = false}">取消</a-button>
        <!--        <a-button @click.stop="()=>{resetForm('defForm')}">重置</a-button>-->
        <a-button type="primary" @click.stop="editRole">保存</a-button>
      </template>

    </a-modal>

    <!--详情Dialog-->
    <a-modal
        title="角色详情"
        style="min-width: 800px"
        :maskClosable="false"
        :destroyOnClose="true"
        v-model:visible="option.openInfo">

      <!--表单-->
      <a-form
          ref="defForm"
          label-align="right"
          :model="defForm.data"
          :rules="defForm.rules"


          :scrollToFirstError="true">
        <a-form-item label="ID" name="id">
          <a-input readonly v-model:value="defForm.data.id" placeholder="请输入唯一ID" :allowClear="true"/>
        </a-form-item>

        <a-form-item label="角色名称" name="name">
          <a-input readonly v-model:value="defForm.data.name" placeholder="请输入角色名称" :allowClear="true"/>
        </a-form-item>

        <a-form-item label="权限字符" name="role_key">
          <a-input readonly v-model:value="defForm.data.role_key" placeholder="请输入权限字符" :allowClear="true"/>
        </a-form-item>

        <a-form-item label="状态" name="status">
          <a-radio-group v-model:value="defForm.data.status">
            <a-radio value="0">启用</a-radio>
            <a-radio value="1">停用</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item label="排序" name="sort">
          <a-input-number v-model:value="defForm.data.sort"
                          readonly :min="1" :max="99999"/>
        </a-form-item>

        <a-form-item label="描述信息" name="desc">
          <a-textarea v-model:value="defForm.data.desc"
                      readonly show-count :maxlength="200" placeholder="请输入描述信息" :rows="3"/>
        </a-form-item>

        <a-divider style="margin: 0 0 20px 0;padding: 0"></a-divider>

        <h3>菜单权限</h3>
        <!--表格-->
        <a-table
            sticky
            ref="menuTable"
            rowKey="id"
            :pagination="false"
            :size="menuTable.size"
            :columns="menuTable.column"
            :data-source="menuTable.data"
            :rowSelection="menuTable.rowSelection()"
            @resizeColumn="(w, col) => {col.width = w;}">

          <!--表格内容-->
          <template #bodyCell="{ text, record, index, column  }">
            <!--目录-->
            <template v-if="column.dataIndex === 'name'">
              <span v-if="record.type==0||record.type==1"> {{ text }}</span>
              <a-tag v-else> {{ text }}</a-tag>
            </template>

            <template v-if="column.dataIndex === 'apis'">

              <tempalte v-if="text">
                <a-tooltip placement="top">
                  <template #title>
                    <a v-for=" (item,index) in JSON.parse(text)">
                      {{ item }} &nbsp;
                    </a>
                  </template>
                  <a-tag v-for=" (item,index) in JSON.parse(text)">
                    {{ item }}
                  </a-tag>
                </a-tooltip>
              </tempalte>

              <tempalte v-else>
                #
              </tempalte>

            </template>

            <template v-if="column.dataIndex === 'path'">
              <span v-if="text">{{ text }}</span>
              <span v-else>#</span>
            </template>

            <template v-if="column.dataIndex === 'type'">
              <a-tag v-if="text==0" color="blue" class="round">目录</a-tag>
              <a-tag v-else-if="text==1" color="green" class="round">菜单</a-tag>
              <a-tag v-else color="yellow" class="round">功能</a-tag>
            </template>
          </template>

        </a-table>

      </a-form>

      <!--底部按钮-->
      <template #footer>
        <a-button @click.stop="()=>{option.openInfo = false}">关闭</a-button>
      </template>

    </a-modal>

    <!--菜单详情Dialog-->
  </div>
</template>

<script lang="ts">
import {DeleteOutlined, PlusOutlined, SearchOutlined, UndoOutlined} from "@ant-design/icons-vue";
import {requiredBlur, requiredChange} from "@/common/util/validate";
import {TreeSelect} from "ant-design-vue";
import {ModalKit} from "@/common/util/ModalKit";
import {useLayoutStore} from "@/common/store/modules/layout";
import Pagination from "@/common/component/Pagination.vue";
import {copyObj} from "@/common/util/kit";
import {parseTree} from "@/common/util/tree";

export default {
  components: {Pagination, DeleteOutlined, SearchOutlined, UndoOutlined, PlusOutlined},
  async mounted() {
    //查询职位下拉选
    await this.optionPost()
    //查询角色下拉选
    await this.optionRole()
    // 查询组织分页
    this.queryOrgPage()

    this.queryPage()

    //全局监听-刷新当前页面
    this.$event.$on('refresh', (data) => {
      if (this.$route.path == data['path']) {
        this.resetForm('defSearch');
        this.queryPage()
      }
    })

    //更新表格大小
    this.calcDefaultTableHeight()

    //监控窗口大小变更
    window.onresize = () => {
      this.calcDefaultTableHeight()
    }
  },
  data() {
    return {
      SHOW_ALL: TreeSelect.SHOW_ALL,
      //选项
      option: {
        openAdd: false,
        openEdit: false,
        openInfo: false,
        openDown: true,
        leftBlockMinHeight: '100%',
        tableMinHeight: '100%',
        tableSize: [
          {label: '大号', value: 'default'},
          {label: '中号', value: 'middle'},
          {label: '小号', value: 'small'},
        ],
        roleStatus: [
          {label: '启用', value: '0'},
          {label: '停用', value: '1'},
        ],
        menuTree: [],
        apiTree: [],
        orgTree: [],
        expandedKeys: [],
        selectedKeys: [],
        orgTreeAllIds: [],
        role: [],
        post: [],
      },

      //搜索表单（默认）
      defSearch: {
        param: {
          name: undefined,
          account: undefined,
          phone: undefined,
          orgId: undefined,
          postIds: [],
          roleIds: [],
        },
        rules: {},
        labelCol: {style: {width: '60px'}},
      },

      //表单（默认）
      defForm: {
        //实际表单数据
        data: {},
        initData: {
          id: '1',
          sort: '100',
          status: '0',
          desc: '',
          name: '1',
          role_key: '1',
        },
        rules: {
          id: [requiredBlur],
          name: [requiredBlur],
          sort: [requiredBlur],
          status: [requiredBlur],
          role_key: [requiredBlur],
        },
      },

      //表单（菜单功能）
      funForm: {
        //实际表单数据
        data: {
          sort: 1,
          menuName: undefined,
          name: undefined,
          apis: [],
        },
        rules: {
          name: [requiredBlur],
          sort: [requiredBlur],
          apis: [requiredChange],
        },
      },

      //表格数据（默认）
      defTable: {
        size: 'middle',
        data: [],
        column: [
          {title: 'ID', dataIndex: 'id', ellipsis: true, width: 100, align: 'center', resizable: true},
          {title: '昵称', dataIndex: 'name', resizable: true},
          {title: '账号', dataIndex: 'account', resizable: true,},
          {title: '手机号', dataIndex: 'phone', resizable: true},
          {title: '角色', dataIndex: 'role', resizable: true},
          {title: '组织机构', dataIndex: 'org', resizable: true},
          {title: '职位', dataIndex: 'post', resizable: true},
          {title: '排序', dataIndex: 'sort', resizable: true, align: 'center', width: 80},
          {title: '操作', dataIndex: 'action', align: 'center', resizable: true},
        ],
        selectKey: [],
        selectRow: [],
        rowSelection: () => {
          return {
            type: "checkbox",
            checkStrictly: false,
            preserveSelectedRowKeys: false,//翻页后保留选中状态
            selectedRowKeys: this.defTable.selectKey,
            onChange: (selectedRowKeys, selectedRows) => {
              this.defTable.selectKey = selectedRowKeys
              this.defTable.selectRow = selectedRows
            },
            onSelect: (record, selected, selectedRows) => {
            },
            onSelectAll: (selected, selectedRows, changeRows) => {
            },
          }
        },
      },

      //表格数据（默认）
      menuTable: {
        size: 'small',
        data: [],
        column: [
          {title: '名称', dataIndex: 'name', resizable: true, align: 'center'},
          {title: '类型', dataIndex: 'type', resizable: true, align: 'center', width: 80},
          {title: '访问地址', dataIndex: 'path', resizable: true, align: 'center'},
        ],
        selectKey: [],
        selectRow: [],
        rowSelection: () => {
          return {
            type: "checkbox",
            checkStrictly: false,
            preserveSelectedRowKeys: false,//翻页后保留选中状态
            selectedRowKeys: this.menuTable.selectKey,
            onChange: (selectedRowKeys, selectedRows) => {
              this.menuTable.selectKey = selectedRowKeys
              this.menuTable.selectRow = selectedRows
            },
            onSelect: (record, selected, selectedRows) => {
            },
            onSelectAll: (selected, selectedRows, changeRows) => {
            },
          }
        },
      },

      //分页信息（默认）
      defPage: {
        current: 1,
        size: 10,
        total: 0,
        type: 'small',
        change: (current, pageSize) => {
          this.defPage.current = current
          this.defPage.size = pageSize;
          this.queryPage()
        }
      },
    }
  },
  methods: {
    //查询分页
    queryPage() {
      //加载中
      useLayoutStore().pageLoading = true;

      let param = copyObj(this.defSearch.param)
      param.size = this.defPage.size
      param.current = this.defPage.current

      this.$http.post('/system/user/list', param).then((res) => {
        //分页
        this.defPage.total = res.total * 1
        //数据
        this.defTable.data = res.data
        useLayoutStore().pageLoading = false;
      })
    },
    //搜索
    search() {
      this.$refs.defSearch.validate().then(() => {
        this.queryPage()
      }).catch(error => {
        this.$message.warning("存在错误，请检查表单填写情况。", 2)
      });

    },
    //重置表单（还原）
    resetForm(formName) {
      let form = this.$refs[formName]
      if (form) {
        form.resetFields()
      }
      //需要特殊处理
      if (formName == 'defSearch') {
        this.defSearch.param.orgId = null;
        this.option.selectedKeys = []
      }
    },
    //打开新增Dialog
    async openAdd(record) {
      await this.queryMenuPage()
      this.defForm.data = copyObj(this.defForm.initData)
      this.option.openAdd = true;
    },
    //打开复制并新增
    async openCopyAdd(record) {
      await this.queryMenuPage()
      this.defForm.data = copyObj(record);
      this.menuTable.selectKey = JSON.parse(this.defForm.data.check_ids)
      this.option.openAdd = true;
    },
    //打开编辑菜单Dialog
    async openEdit(record) {
      await this.queryMenuPage()
      this.defForm.data = copyObj(record);
      this.menuTable.selectKey = JSON.parse(this.defForm.data.check_ids)
      this.option.openEdit = true;
    },
    //详情
    async openInfo(record) {
      await this.queryMenuPage()
      this.defForm.data = copyObj(record);
      this.menuTable.selectKey = JSON.parse(this.defForm.data.check_ids)
      this.option.openInfo = true;
    },
    //添加
    addRole(record) {
      this.$refs.defForm.validate()
          .then(() => {
            let submitForm = copyObj(this.defForm.data)
            //console.log("【this.menuTable.selectKey】", this.menuTable.selectKey)
            //console.log("【this.menuTable.selectRow】", JSON.stringify(this.menuTable.selectRow))

            //回显IDS
            submitForm.check_ids = this.menuTable.selectKey

            //
            let apis = []
            let menus = []
            this.menuTable.selectRow.filter(e => {
              if (e.apis) {
                apis.push(e.id)
                menus.push(e.menu_id)
              } else {
                menus.push(...JSON.parse(e.ids))
              }
            })
            submitForm.apis = toSetArray(apis)
            submitForm.menus = toSetArray(menus)
            //console.log("【check_ids】", submitForm.check_ids)
            //console.log("【apis】", submitForm.apis)
            //console.log("【menus】", submitForm.menus)

            //console.log("【submitForm】", JSON.stringify(submitForm))

            // apis
            this.$http.post("/system/user/add", submitForm).then((res) => {
              this.$message.success(res.message, 1)
              this.queryPage()
              this.option.openAdd = false
            })

          })
          .catch(error => {
            this.$message.warning("存在错误，请检查表单填写情况。", 2)
          });
    },
    //编辑
    editRole(record) {
      this.$refs.defForm.validate()
          .then(() => {
            let submitForm = copyObj(this.defForm.data)
            //console.log("【this.menuTable.selectKey】", this.menuTable.selectKey)
            //console.log("【this.menuTable.selectRow】", JSON.stringify(this.menuTable.selectRow))

            //回显IDS
            submitForm.check_ids = this.menuTable.selectKey

            //
            let apis = []
            let menus = []
            this.menuTable.selectRow.filter(e => {
              if (e.apis) {
                apis.push(e.id)
                menus.push(e.menu_id)
              } else {
                menus.push(...JSON.parse(e.ids))
              }
            })
            submitForm.apis = toSetArray(apis)
            submitForm.menus = toSetArray(menus)
            //console.log("【check_ids】", submitForm.check_ids)
            //console.log("【apis】", submitForm.apis)
            //console.log("【menus】", submitForm.menus)
            //console.log("【submitForm】", JSON.stringify(submitForm))

            // apis TODO 编辑
            this.$http.post("/system/user/edit", submitForm).then((res) => {
              this.$message.success(res.message, 1)
              this.queryPage()
              this.option.openEdit = false
            })

          })
          .catch(error => {
            this.$message.warning("存在错误，请检查表单填写情况。", 2)
          });
    },
    //删除
    deleteRole(record) {
      this.$http.post("/system/user/del", {ids: [record.id]}).then((res) => {
        this.$message.success(res.message, 1)
        this.queryPage()
      })
    },
    //批量删除
    delRoleBatch() {
      let keys = this.defTable.selectKey;
      if (keys.length === 0) {
        this.$message.warn("请至少勾选一项", 1)
        return
      }
      ModalKit.confirm(
          `已勾选${keys.length}条数据，是否执行批量删除？`,
          () => {
            this.$http.post("/system/user/del", {ids: keys}).then((res) => {
              this.$message.success(res.message, 1)
              this.queryPage()
            })
          },
          () => {
            this.$message.warning("操作已取消", 1)
          },
      )
    },
    //查询组织分页
    queryOrgPage() {
      useLayoutStore().pageLoading = true

      this.$http.post('/system/org/list', {}).then((res) => {
        let a = []
        res.data.filter(e => {
          a.push(e.id)
        })
        this.option.orgTreeAllIds = a
        this.option.orgTree = parseTree(res.data)
        useLayoutStore().pageLoading = false
      })
    },
    //组织树-点击事件
    orgTreeSelect(selectedKeys, info) {
      let {id, pid, name, pname} = info.node
      //console.log("【orgSelect-id】", id)
      //console.log("【orgSelect-pid】", pid)
      //console.log("【orgSelect-name】", name)
      //console.log("【orgSelect-pname】", pname)
      if (selectedKeys.length == 0) {
        this.defSearch.param.orgId = null
      } else {
        this.defSearch.param.orgId = id
      }
      this.queryPage()
    },
    //
    orgTreeExpand(expandedKeys, {expanded: bool, node}) {
      //console.log("【this.option.expandedKeys】", this.option.expandedKeys)
      //console.log("【expandedKeys】", expandedKeys)

      // let id = node.id
      // let findIndex = -1;
      // for (let i = 0; i < this.option.expandedKeys.length; i++) {
      //   if (this.option.expandedKeys[i] == id) {
      //     findIndex = i;
      //   }
      // }
      //
      // if (findIndex != -1) {
      //   this.option.expandedKeys.splice(findIndex, 1)
      // } else {
      //   this.option.expandedKeys = expandedKeys
      // }

      //console.log("【orgTreeExpand】", expandedKeys)
      //console.log("【node】", node)
      //console.log("【bool】", bool)
    },
    //查询职位下拉选
    async optionPost() {
      return new Promise((resolve, reject) => {
        this.$http.post('/system/user/postList', {}).then((res) => {
          this.option.post = res.data
          resolve(true)
        })
      })
    },
    //查询角色下拉选
    optionRole() {
      return new Promise((resolve, reject) => {
        this.$http.post('/system/user/roleList', {}).then((res) => {
          this.option.role = res.data
          resolve(true)
        })
      })
    },
    //
    openTreeAll() {
      this.option.openDown = !this.option.openDown
      this.option.expandedKeys = this.option.orgTreeAllIds
    },
    //关闭全部树结构
    closeTreeAll() {
      this.option.openDown = !this.option.openDown
      this.option.expandedKeys = []
    },

    //计算表格高度，最小要求铺满窗口
    calcDefaultTableHeight() {
      this.$nextTick(() => {
        //减去 （搜索表单、表格工具栏、外边距、分页(60px)）
        let searchDiv = this.$refs.searchDiv.offsetHeight
        let tableToolDiv = 50
        let margin = 32;
        let page = 60
        this.option.tableMinHeight = `calc(100% - ${searchDiv}px - ${tableToolDiv}px - ${margin}px - ${page}px)`;

        //根据右侧计算左侧高度
        setTimeout(e => {
          this.option.leftBlockMinHeight = (this.$refs.searchDiv.offsetHeight +
              this.$refs.toolDiv.offsetHeight +
              this.$refs.tableDiv.offsetHeight +
              this.$refs.pageDiv.offsetHeight + 16) + 'px';
          // = rightHeight
          // //console.log(" this.$refs.searchDiv.offsetHeight", this.$refs.searchDiv.offsetHeight)
          // //console.log(" this.$refs.toolDiv.offsetHeight", this.$refs.toolDiv.offsetHeight)
          // //console.log(" this.$refs.tableDiv.offsetHeight", this.$refs.tableDiv.offsetHeight)
          // //console.log(" this.$refs.pageDiv.offsetHeight", this.$refs.pageDiv.offsetHeight)
          // //console.log("rightHeight", rightHeight)
          // //console.log(" this.$refs.leftDiv.offsetHeight", this.$refs.leftDiv.offsetHeight)
          // //console.log(" this.$refs.tableDiv.offsetHeight", this.$refs.tableDiv.offsetHeight)
        }, 300)
      })

    },
  }
}

</script>

<style lang="less">

</style>

<style scoped lang="less">
.left_block {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  min-height: calc(100% - 16px);
  min-width: 260px;
  max-width: 260px;
  margin-top: 16px;
  background: #FFF;
  margin-right: 16px;
}
</style>